.monitor {
  width: 100%;
  background-color: white;
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .nav {
    height: 50px;
    display: flex;
    border-bottom: 2px solid #6bb5e6;
  }
  .nav .name {
    width: 180px;
    line-height: 200%;
    background-color: #6bb5e6;
    color: #fff;
    text-align: center;
    height: 79%;
  }
  .arrow {
    margin: 6px auto;
    width: 5px;
    font-size: 0;
    line-height: 0;
    border-width: 5px;
    border-color: #6bb5e6;
    border-bottom-width: 0;
    border-style: dashed;
    border-top-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
  }
  .content {
    height: calc(100% - 50px);
    display: flex;
  }
  //顶部top
  @media screen and (max-width:1024px) {
    .nav {
      height: 40px;
    }
    .nav .name {
      line-height: 150%;
    }
    .content {
      height: calc(100% - 40px);
    }
  }
  .aside {
    width: 40px;
    height: 100%;
    background-color: #e6eff4;
  }
  .aside-item {
    height: 120px;
    font-size: 17px;
    padding: 10px;
    cursor: pointer;
  }
  .check {
    background-color: #6bb5e6;
    color: white;
  }
  ._aside {
    width: 280px;
    /deep/.el-scrollbar__wrap {
      overflow-x: hidden;
    }
    //组织树父节点灰色
    /deep/.el-tree--highlight-current>.el-tree-node {
      margin-top: 2px;
      background-color: #c0c4cc;
    }
  }
  @media screen and (max-width:1024px){
    ._aside {
      width: 175px;
    }
  }
  .pic {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    flex-wrap: wrap;
    background-color: #000;
  }
  .tableWord {
    background-color: #000;
    border: 1px solid #808080;
  }
  .btn {
    background-color: #000;
    height: 40px;
  }

  .video-player {
    height: 200px;
    width: 300px;
  }
  .topDiv {
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
    background-color: #282729;
    height: 36px;
    display: none;
    opacity: 0.8;
    position:absolute
  }
  .videoTopTxt{
    color:white;
    line-height: 36px;
  }
  .bottomDiv{
    top: calc(100% - 36px);
    bottom: 100%;
    width: 100%;
    z-index: 999;
    background-color: #282729;
    height: 36px;
    display: none;
    opacity: 0.8;
    position:absolute
  }
  .playFailDiv {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: white;
  }
  .wrapper1 {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(1, 100%);
    background-color: #000;
    height: calc(100% - 40px);
  }
  .wrapper4 {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(2, 50%);
    width: 100%;
    height: calc(100% - 40px);
  }
  .wrapper6 {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);
    width: 100%;
    height: calc(100% - 40px);
  }
  .wrapper8 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(4, 25%);
    width: 100%;
    height: calc(100% - 40px);
  }
  .wrapper9 {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);
    width: 100%;
    height: calc(100% - 40px);
  }
  .wrapper13 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(4, 25%);
    width: 100%;
    height: calc(100% - 40px);
  }
  .wrapper16 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(4, 25%);
    width: 100%;
    height: calc(100% - 40px);
  }
  @media screen and (max-width:1024px){
    .btn {
      height: 30px;
    }
    .wrapper1 {
      height: calc(100% - 30px);
    }
    .wrapper4 {
      height: calc(100% - 30px);
    }
    .wrapper6 {
      height: calc(100% - 30px);
    }
    .wrapper8 {
      height: calc(100% - 30px);
    }
    .wrapper9 {
      height: calc(100% - 30px);
    }
    .wrapper13 {
      height: calc(100% - 30px);
    }
    .wrapper16 {
      height: calc(100% - 30px);
    }
  }
  .col {
    background: #000;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
  }
  .col_body6 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .col_body8 {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
  }
  .col_body13 {
    grid-column: 2 / 4;
    grid-row: 2/ 4;
  }
  .yuntaiDown {
    position: absolute;
    z-index: 999;
    bottom: 1px;
    left: 45%;
    width: 5%;
  }
  .yuntaiLeft {
    position: absolute;
    z-index: 999;
    bottom: 47%;
    left: 1px;
    width: 5%;
  }
  .yuntaiRight {
    position: absolute;
    z-index: 999;
    bottom: 47%;
    right: 1px;
    width: 5%;
  }
  .yuntaiTop {
    position: absolute;
    z-index: 999;
    top: 1px;
    left: 45%;
    width: 5%;
  }
  .yuntaiZoomIn {
    position: absolute;
    z-index: 999;
    top: 1px;
    right: 1px;
    width: 5%;
  }
  .yuntaiZoomOut {
    position: absolute;
    z-index: 999;
    top: 10%;
    right: 1px;
    width: 5%;
  }
  .default-scrollbar {
    width: 100%;
    height: calc(100% - 20px);
    background-color: #172a47;
  }
  .treeForPollClass {
    .el-tree {
      background-color: #172a47;
      color: #fff;
    }
    /deep/.el-tree-node__content {
      height: 34px;
      cursor: default;
      &:hover {
        background-color: #a4cedb;
      }
    }
    /deep/.el-tree-node.is-current > .el-tree-node__content {
      background-color: #00b2ee;
      color: #ffffff;
    }
  }
  // 组织树
  .el-tree-class {
    .el-tree {
      height: calc(100% - 84px);
      background-color: #f5f5f5;
    }
  
    /deep/.el-tree--highlight-current > .el-tree-node {
      margin-top: 2px;
      background-color: #c0c4cc;
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
    /deep/div[role='group'] {
      background-color: #ffffff;
    }
    /deep/.el-tree-node.is-current > .el-tree-node__content {
      background-color: #00b2ee !important;
      color: #ffffff;
    }
    /deep/.el-tree-node__content {
      height: 34px;
      cursor: default;
      &:hover {
        background-color: #bfe3ef;
      }
    }
    /deep/.el-tree-node__expand-icon.el-icon-arrow-right {
      color: #000;
    }
    /deep/.is-leaf.el-tree-node__expand-icon.el-icon-arrow-right:before {
      content: none;
    }
  }
  .custom-tree-node {
    height: 30px;
    line-height: 30px;
    font-size: 17px;
    margin-top: 2px;
    &.isDrag {
      cursor: pointer;
    }
    img {
      width: 18px;
      height: 20px;
      vertical-align: middle;
    }
  
    .video-online {
      content: url('~@/assets/images/Video_Online.png');
    }
  
    .video-offline {
      content: url('~@/assets/images/Video_Leave.png');
    }
  
    .video-playing {
      content: url('~@/assets/images/Video_Playing.png');
    }
  }
  .dialogBackGround {
    background-color: #1a4969 !important;
    // height: 70%;
    /deep/.el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-dialog__footer {
      background-color: #1a4969;
      padding: 5px 30px;
      height: 45px;
      .el-button {
        width: 70px;
        background-color: #1a4969;
        color: #ffffff;
        &:hover {
          background-color: #409eff;
        }
      }
      .el-button--primary{
        border-color: white;
      }
    }
  }
  /deep/.el-dialog{
    background-color: #1a4969 !important;
  }
  /deep/.el-dialog__body{
    color: white !important;
    padding: 14px 14px;
    /deep/.el-input__inner{
      background-color: #1a4969 !important;
      color: white;
    }
    @media screen and (max-width:1024px){
      /deep/.el-input__inner{
        height: 30px;
      }
    }
    //混码弹出框
    .fixDialog{
      color:white;
      text-align: center;
      .fixDialogInput{
        float: left;
        margin-left: 10px;
        margin-top: 10px;
        zoom: 135%;
      }
      .fixDialogTxt{
        font-size:18px;
        background-color:#2E67A8;
        height:40px;
        line-height: 40px;
      }
      .fixDialogItem{
        height:40px;
        font-size:18px;
        background-color: #172a47;
        margin-bottom: 1px;
        line-height: 40px;
      }
      .fixDialogItem:hover{
        border: 1px solid white;
        background-color:#6BB5E6;
      }
      .fixDialogScrollbar{
        height:400px;
      }
      @media screen and (max-width:1440px) and (min-width:1024px){
        .fixDialogScrollbar{
          height:300px;
        }
      }
      .el-input__inner,
      .el-textarea__inner {
        background-color: #1a4969;
        color: #fff;
        // width: 40%;
      }
      @media screen and (max-width:1024px){
        .fixDialogScrollbar{
          height:150px;
        }
      }
    }
    //轮询弹出框
    .pollDialog{
      height:530px;
      .checkItemClass{
        float: left;text-align:center;width: 55%;
        margin-left: 20px;
      }
      .pollRightTxt{
        width: 100%;height:42px;font-size:18px;
        background-color: #2E67A8;
        line-height: 42px;
      }
      .pollRightItem{
        height:42px;
        font-size:18px;
        align-items: center;
        margin-top:1px;
        background-color: #172a47;
        line-height: 42px;
      }
      .pollRightItem:hover{
        border:1px solid white;
        background-color: #6BB5E6;
      }
      .pollDialogScrollbar{
        height:500px;
      }
      .pollTime{
        width:50%;float:right;color:white;
        margin-top:-20px;
      }
      .pollTimeLeft{
        // width:20%;
        line-height: 39px;
        font-size: 15px;
      }
      .pollTimeRight{
        // width:80%;
        font-size: 15px;
      }
    }
    @media screen and (max-width:1440px) and (min-width:1024px){
      .pollDialog{
        height:380px;
        .pollDialogScrollbar{
          height:350px;
        }
      }
      
    }

    
    @media screen and (max-width:1024px){
      .pollDialog{
        height:150px;
        .pollRightTxt{
          height:22px;font-size:15px;
          line-height: 22px;
        }
        .pollRightItem{
          height:22px;
          font-size:13px;
          line-height: 22px;
        }
        .pollDialogScrollbar{
          height:150px;
        }
        .pollTime{
          display: inherit;
          clear:both
        }
        .pollTimeLeft{
          width:20%;
          line-height: 48px;
        }
        .pollTimeRight{
          width:80%;
        }
      }
    }
  }
  .bottomButton{
    width:40px
  }
  @media screen and (max-width:1024px){
    .bottomButton{
      width:30px
    }
  }
  
  //处理弹出框
  @media screen and (max-width:1024px){
    /deep/.el-dialog__footer {
      padding: 3px 17px 4px;
    }
    /deep/.el-dialog__header {
      padding: 4px 20px 4px;
    }
    /deep/.el-button{
      padding: 5px 10px;
    }
    /deep/.el-dialog {
      .el-dialog__body {
        //border-top: 1px solid #dcdfe6;
        //border-bottom: 1px solid #dcdfe6;
        max-height: 500px !important;
        min-height: 100px;
        overflow-y: auto;
      }
    }
    .fixDialogTxt{
      font-size:14px;
    }
  }
  .person-dropdown{
    .person-dropdown-menu {
      /deep/.el-dropdown-menu{
        background-color: rgba(#436068, 0.9);
      }
      background-color: rgba(#436068, 0.9);
      .el-dropdown-menu__item {
        height: 30px;
      }
      li {
        color: #fff;
      }
      .popper__arrow {
        &::after {
          border-top-color: rgba(#436068, 0.9) !important;
        }
      }
    }
  }

}
